<template>
  <div class="wifi-visitor relative">
    <page-loading></page-loading>
    <div class="view-table mb20">
      <div class="table-title">
        {{"2.4G " + info.title}}：
      </div>
      <table class="table-center">
        <colgroup>
          <col class="w100">
          <col class="w200">
          <col class="w100">
          <col class="w50">
        </colgroup>
        <thead>
          <tr>
            <th v-for="(item, idx) in info.head" :key="idx">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>WLAN</td>
            <td>
              <input type="text" class="input-none bottom-line text-center input-cell"
               v-model="guest_info.guest_ssid"/>
            </td>
            <!-- h5 原生的checkbox/radio 绑定值只能是boolean -->
            <td><input type="checkbox" class="" style="zoom: 1.4;" v-model="guest_info.guest_enabled"></td>
            <td><span class="add" @click="set_wifi_guest(2, guest_info)">{{info.operate}}</span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="view-table mb20" v-if="$store.state.info.perm.wifi.wifi_5">
      <div class="table-title">
        {{"5G " + info.title}}：
      </div>
      <table class="table-center">
        <colgroup>
          <col class="w100">
          <col class="w200">
          <col class="w100">
          <col class="w50">
        </colgroup>
        <thead>
          <tr>
            <th v-for="(item, idx) in info.head" :key="idx">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>WLAN</td>
            <td>
              <input type="text" class="input-none bottom-line text-center input-cell"
               v-model="guest_info5.guest_ssid"/>
            </td>
            <!-- h5 原生的checkbox/radio 绑定值只能是boolean -->
            <td><input type="checkbox" style="zoom: 1.4;" v-model="guest_info5.guest_enabled"></td>
            <td><span class="add" @click="set_wifi_guest(5, guest_info5)">{{info.operate}}</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        info: this.$t('wifi.visitor.info'),
        // 布局宽度比例分配
        distributed: [],
        guest_info: {},
        guest_info5: {},
      }
    },
    methods: {
      get_wifi_guest(type){

        type == 5 ? "" :
        this.$req.get('/webapi?op=get_wifi_guest').then(res=> {
          console.log(res)
          res.guest_enabled = res.guest_enabled == '0' ? false : true
          this.guest_info = res
        })

        type == 2 ? "" :
        this.$req.get('/webapi?op=get_wifi_guest5').then(res=> {
          console.log(res)
          res.guest_enabled = res.guest_enabled == '0' ? false : true
          this.guest_info5 = res
        })
      },
      set_wifi_guest(type, guest_info){
        if(guest_info.guest_enabled && guest_info.guest_ssid == ''){
          this.$confirm(this.$t("notification.lackBssid"), {
            title: this.$t("notification.notice"),
            message: this.$t("notification.lackBssid"),
            type: "error",
          }).catch(err=> {})
          return
        }
        const params = {
          guest_enabled: guest_info.guest_enabled ? '1' : '0',
          // guest_enabled: this.guest_info.guest_enabled,
          guest_ssid: guest_info.guest_ssid,
        }
        console.log(params)
        this.proxy_req("get", "/webapi?op=set_wifi_guest"+(type == 5 ? 5 : ""), params, res=> {
          if(res.code!="1"){
            return
          }
          this.get_wifi_guest(type)
        }, true, )
      }
    },
    created() {
      this.$bus.emit('changeTab', 2)
      this.get_wifi_guest()
    }
  }
</script>

<style lang="scss" scoped>

</style>
